<template>
    <div class="admin-user-wrap">
        <div class="form-wrap" v-if="userInfo">
            <div class="form-item">
                <label>头像</label>
                <div class="content jc-fe">
                    <div class="avatar">
                        <l-image :src="userInfo.avatar" width="90" height="90"></l-image>
                        <input type="file" @change="uploadAvatar">
                    </div>
                </div>
            </div>
            <div class="form-item">
                <label>昵称</label>
                <div class="content">
                    <input type="text" v-model="userInfo.userName" placeholder="请输入您的昵称">
                </div>
            </div>
            <div class="form-item">
                <label>身份证号</label>
                <div class="content">
                    <input type="text" v-model="userInfo.idCard" placeholder="请输入您的身份证号">
                </div>
            </div>
            <div class="form-item">
                <label>性别</label>
                <div class="content">
                    <select v-model="userInfo.sex">
                        <option value="0">男</option>
                        <option value="1">女</option>
                        <option>未知</option>
                    </select>
                </div>
            </div>
            <div class="form-item">
                <label>生日</label>
                <div class="content">
                    <input type="date" v-model="userInfo.birthday">
                    <input type="text" readonly v-model="userInfo.birthday" placeholder="请选择您的生日">
                </div>
            </div>
            <div class="form-item">
                <label>电子邮箱</label>
                <div class="content jc-fe">
                    {{userInfo.email}}
                </div>
            </div>
            <div class="form-item">
                <label>婚姻状况</label>
                <div class="content">
                    <select v-model="userInfo.marriageType">
                        <option value="1">已婚</option>
                        <option value="2">未婚</option>
                        <option value="3">保密</option>
                    </select>
                </div>
            </div>
            <br>
            <l-button class="save-btn" block @click="handlerSubmit">保存</l-button>
            <br>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AdminIndex",
        data() {
            return {
                date: ''
            }
        },
        computed: {
            userInfo() {
                return JSON.parse(JSON.stringify(this.$root.userInfo))
            }
        },
        components: {},
        created() {
        },
        methods: {
            async uploadAvatar(e) {
                try {
                    const res = await this.$api.user.uploadAvatar(e.target.files[0])
                    console.log(res)
                    this.$root.getUserInfo()
                } catch (e) {

                }
            },
            async handlerSubmit() {
                try {
                    let user = JSON.parse(JSON.stringify(this.userInfo))
                    let data = {
                        userName: user.userName,
                        email: user.email,
                        phonenumber: user.phonenumber,
                        sex: user.sex,
                        idCard: user.idCard,
                        marriageType: user.marriageType,
                        birthday: this.$utils.dayjs(user.birthday).format('YYYY-MM-DD'),
                    }
                    const res = await this.$api.user.updateUserInfo(data)
                    console.log(res)
                    this.$root.getUserInfo()
                    this.$notify({
                        type: 'success',
                        message: '修改成功'
                    })
                } catch (e) {

                }
            }
        },
    }
</script>

<style lang="scss">
    @import "./style";
</style>
